<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-row>
        <el-col :span="8">
          <el-form-item label="位置" prop="position">
            <el-input v-model="pram.position" maxlength="100" placeholder="位置" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="型号" prop="model">
            <el-input v-model="pram.model" maxlength="100" placeholder="型号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <el-input v-model="pram.type" maxlength="100" placeholder="类型" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="数量" prop="number">
            <el-input v-model="pram.number" maxlength="100" type="number" placeholder="数量" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属单位" prop="departmentName">
            <el-input v-model="pram.departmentName" maxlength="100" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人" prop="personName">
            <el-input v-model="pram.personName" maxlength="100" placeholder="负责人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="有无战斗部" prop="isXx">
            <el-radio-group v-model="pram.isXx">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有无真实发动机" prop="isEngine">
            <el-radio-group v-model="pram.isEngine">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">有</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库日期" prop="deliveryDate">
            <el-date-picker
              v-model="pram.deliveryDate"
              value-format="yyyy/MM/dd" format="yyyy/MM/dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="出库日期" prop="warehousingDate">
            <el-date-picker
              v-model="pram.warehousingDate"
              value-format="yyyy/MM/dd" format="yyyy/MM/dd"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用途" prop="use">
            <el-input v-model="pram.useTo" maxlength="100" placeholder="用途" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="pram.remark" maxlength="100" placeholder="备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="序号">
        <el-input-number v-model="pram.serialNumber" :min="0"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:workshop:update','admin:workshop:save']">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
import * as workshopApi from '@/api/workshop.js'
import {Debounce} from '@/utils/validate'
export default {
  // name: "edit"
  components: { },
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allCategoryData:{
      type: Object
    },
    allTreeList: {
      type: Array
    }
  },
  data() {
    /*const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写手机号'));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
      } else {
        callback();
      }
    };*/
    return {
      constants:this.$constants,
      pram: {
        position: null,
        model: '',
        type: null,
        number: '',
        departmentName: '',
        isXx: 0,
        isEngine: 0,
        personName: null,
        deliveryDate: '',
        warehousingDate: '',
        useTo: '',
        remark: '',
        serialNumber: 0,
        id: 0,
      },
      rules: {
        // name: [{ required: true, message: '请填名称', trigger: ['blur', 'change'] }],
        // position: [{ required: true, message: '请填位置', trigger: ['blur', 'change'] }],
        // type: [{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }],
        // departmentId: [{ required: true, message: '请选择所属单位', trigger: ['blur', 'change'] }],
        // isXx: [ { required: true, message: '请选择有无XX', trigger: ['blur', 'change']} ],
        // isEngine: [ { required: true, message: '请选择有无XX发动机', trigger: ['blur', 'change']} ],
        // personId: [ { required: true, message: '请选择所属人', trigger: ['blur', 'change']} ],
      },
      categoryData:{},
      parentOptions: [],
      categoryProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
        emitPath: false
      },
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      this.categoryData = this.allCategoryData
      this.parentOptions = [...this.allTreeList]
      this.addTreeListLabelForCasCard(this.parentOptions, 'child')

      if (this.isCreate !== 1) return //编辑

      const { number, position, type, departmentId, isXx, isEngine, model, id,personName,deliveryDate,warehousingDate,useTo,remark,serialNumber } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      this.pram = {...this.editData}
      this.pram.position = position
        this.pram.model = model
        this.pram.type = type
        this.pram.number = number
        this.pram.departmentId = departmentId
        this.pram.isXx = isXx
        this.pram.isEngine = isEngine
        this.pram.personName = personName
        this.pram.deliveryDate = deliveryDate
        this.pram.warehousingDate = warehousingDate
        this.pram.useTo = useTo
        this.pram.remark = remark
        this.pram.id = id
        this.pram.serialNumber = serialNumber


    },
    addTreeListLabelForCasCard(arr, child) {
      arr.forEach((o,i) => {
        if (o.child && o.child.length) {
          // o.disabled = true
          o.child.forEach((j) => {
            //j.disabled = true
          })
        }
      })
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (this.isCreate === 0) {
          this.handlerSave()
        } else {
          this.handlerEdit()
        }
      })
    }),
    handlerSave() {
      workshopApi.plantAdd(this.pram).then(data => {
        this.$message.success('创建技术阵地/厂房成功')
        this.$emit('hideEditDialog')
      })
    },
    handlerEdit() {
      workshopApi.plantAdd(this.pram).then(data => {
        this.$message.success('更新技术阵地/厂房成功')
        this.$emit('hideEditDialog')
      })
    },
  }
}
</script>

<style scoped>

</style>
